<template>
  <div>{{count}}</div>
  <div>{{user}}</div>
  <div>{{name}}</div>
  <div>{{age}}</div>
  <div>{{address}}</div>
  <div>
    <button @click="childrenClick">childrenBn</button>
  </div>
</template>

<script>
import { ref, reactive, toRefs } from 'vue'
export default {
  //选项时setup api 相当于是beforeCreate和create 的生命周期
  //data和methods 都在setup里面去写
  //简单的数据类型一般都用ref
  //复杂对象一般都用reactive
  //toRefs 将一个响应式对象转换为一个普通对象 通俗来说就是解构解值
  props: ['msg'],
  setup (props, { attrs, emit, expose }) {
    console.log("props.msg:", props.msg);
    console.log("attrs:", attrs.msg1);
    let count = ref(0);
    const user = reactive({
      name: '张三', age: 18, address: {
        sheng: '河南',
        shi: '商丘'
      }
    })
    //toRefs 将一个响应式对象转换为一个普通对象 通俗来说就是解构解值
    const { name, age, address } = toRefs(user);
    const childrenClick = function () {
      count.value++;
      user.name = '李四'
      emit('childrenFn', user)
    }
    expose({ user })
    return { count, user, childrenClick, name, age, address }
  }
}
</script>

<style>
</style>